<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Album</title>
	<link href="https://fonts.font.im/css?family=Modern+Antiqua" rel="stylesheet">
	<link href="https://fonts.font.im/css?family=Hanalei+Fill" rel="stylesheet">
	<link href='http://cdn.repository.webfont.com/webfonts/nomal/142509/45837/5fdb3e9cf629d8b194215f45.css' rel='stylesheet' type='text/css' />
	<style>
		 .top{
			width:auto;
			height: 290px;
		}
		.me{
			position: relative;
				left:40%;
		}
		.myName{
			position: relative;
			left:46%;
			font-family:'ljsh251595db6322cad';
		}
		.tag{
			font-size: 17px;
			position: absolute;
			left:40%;
			font-family: 'Modern Antiqua', cursive;
		}
	.button { /* 按钮美化 */
	width:180px; /* 宽度 */
	height: 50px; /* 高度 */
	border-width: 10px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background:rgba(229,229,229,1.00); /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: black; /* 字体颜色 */
	font-size: 20px;/* 字体 */
	display:inline-block;
	transform: translateX(-80%) translateY(-10%);
   
}
		.button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background:rgba(198,198,198,1.00);
	}

	.p {
		font-family: 'Hanalei Fill', cursive;
		text-align: center;
		text-transform: uppercase;
		color:#444444;
		user-select: none;		
	}
		.tel{
			position: relative;
			left: 40%;
		}
		.email{
			position: relative;
			left: 37%
		}
	
		.huojian{
			margin-left: 15%;
			margin-right: 20%;
		}
	.bottom{
			width: auto;
			height: 80px;
		}
		 .box {
            margin: 10px;
            column-count:4;
            column-gap: 10px;
	}
		 .item img{
            width: 100%;
            height:100%;
			
			
        }
	</style>
	
	
</head>

<body>
<div class="top">
		<img class="me" src="../image/znjtx.jpg" width="190" height="160" alt=""/>
		<h2 class="myName">张宁静</h2><p class="tag">web design by Dreamweaver</p></div>
		<hr align="center" width="80%" color="rgba(100,100,100,1.00)"size="1">
	<div style="margin-left: 30%;margin-right: 0%;">
		<a href="../index.html"><div class="button"><p class="p">Home</p></div></a>
		<a href="Album.html"><div class="button"><p class="p">Album</p></div></a>
		<a href="brief.html"><div class="button"><p class="p">Brief</p></div></a>
		<a href="designer.html"><div class="button"><p class="p">Designer</p></div></a>
	</div>
	<div style="margin-left:10%;margin-right:10%;">
	<div class="box">
    <div class="item">
       <a href="mystery.html"><img  src="../image/IMG_7596.JPG" alt="" /></a>
    </div>
    <div class="item">
       <a href="open.html"><img  src="../image/IMG_7600.JPG" alt="" /></a> 
    </div>
    <div class="item">
		<a href="organ.html"><img  src="../image/IMG_7597.JPG" alt="" /></a>
    </div>
    <div class="item">
		 <a href="listen.html"><img  src="../image/IMG_7601.JPG" alt="" /></a>
    </div>
    <div class="item"> 
		<a href="life.html"><img  src="../image/IMG_7599.JPG" alt="" /></a>   
    </div>
    <div class="item">
        <a href="fulfill.html"><img  src="../image/IMG_7624.JPG" alt="" /></a>
    </div>
    <div class="item">
       <a href="novelist.html"><img  src="../image/IMG_7598.JPG" alt="" /></a>
    </div>
    <div class="item">
        <a href="girls.html"><img  src="../image/IMG_7625.JPG" alt="" /></a>
    </div>
  
    </div>
	</div>
	<div class="bottom"><img class="huojian" src="../image/IMG_7603.GIF" width="800" height="300" alt=""/>
<p class="tel">tel:19907148507</p><p class="email">email:r1245110373@163.com</p></div>
</body>
</html>

